 <template>
    <div class="user">
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
            <el-form-item label="日期">
                <el-date-picker v-model="formInline.date" type="date" prop="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="formInline.name" prop="name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="formInline.region" prop="region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="onReset">重置</el-button>
                <el-button type="success" @click="adduser">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="createdate" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="float:right">
            <p></p>
            <el-pagination @current-change="handleCurrentChange" layout="total,prev, pager, next" :page-size="5" :total="total" background>
            </el-pagination>
        </div>
        <adduser :roleData=roleData :dialogFormVisible=dialogFormVisible @formchange="formchange" @freshFrom="freshFrom"></adduser>
        <edituser :roleData=roleData :editFormVisible=editFormVisible :userId='userId' @editformchange='editformchange' @freshFrom="freshFrom"></edituser>
    </div>

</template>

<script>
import adduser from "../../pages/user/adduser";
import edituser from "../../pages/user/edituser";
import { Loading } from "element-ui";
export default {
    data() {
        return {
            loading: false,
            formInline: {
                date: "",
                region: "",
                name: ""
            },
            tableData: [],
            roleData: [],
            curNum: "", //当前分码,
            total: 0,
            dialogFormVisible: false,
            editFormVisible: false,
            userId: ""
        };
    },
    components: {
        adduser,
        edituser
    },
    methods: {
        freshFrom() {
            this.getList();
        },
        initRoles() {
            var _this = this;
            this.$http
                .post("/role/roleList")
                .then(res => {
                    if (res.status == 200) {
                        _this.roleData = res.data.data;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        formchange(val) {
            this.dialogFormVisible = false;
        },
        editformchange() {
            //编辑用户状态回传
            this.editFormVisible = false;
        },
        onSubmit() {
            //console.log(JSON.stringify( this.formInline));
            this.getList();
            //  this.formInline = {};
            //  this.$refs['formInline'].resetFields();
        },
        handleEdit(index, row) {
            this.userId = row.id;
            this.editFormVisible = true;
        },
        handleDelete(index, row) {
            this.zdel("/user/deluserInfo", row.id);
        },
        handleCurrentChange(val) {
            this.curNum = val;
        },
        onReset() {
            this.formInline = {};
            this.getList();
        },
        adduser() {
            this.dialogFormVisible = true;
        },
        getList() {
            let self = this;
            let loadingInstance = Loading.service({
                target: ".el-table"
            });
            this.zpost(
                "/user/getUserList", //请求地址
                this.curNum, //当前页
                this.formInline //查询参数
            ).then(
                function(value) {
                    self.tableData = value.tableData;
                    self.total = value.total;
                },
                function(error) {
                    // failure
                    console.log(error);
                }
            );
            loadingInstance.close();
        }
    },
    watch: {
        curNum() {
            let loadingInstance = Loading.service({
                target: ".el-table"
            });
            this.getList();
            loadingInstance.close();
        }
    },
    mounted() {
        this.getList();
        this.initRoles();
    }
};
</script>

<style scoped>
</style>



